<template>
  <div class="main">
    <basic-layout title="报修详情" :showAddBtn="false" class="wrapBox">
      <van-form ref="form" class="vanForm">
        <van-field readonly label="设备名称" name="设备名称" v-if="formData.assetsType == '03'">
          <template #input>
            <div>
              <span>{{ formData.swLysbLouysbxxName }}</span>
            </div>
          </template>
        </van-field>



        <van-field readonly label="设备品名" name="设备品名" v-if="formData.assetsType == '05'">
          <template #input>
            <div>
              <span>{{ formData.swFuwsbPinm }}</span>
            </div>
          </template>
        </van-field>

<!--        <van-field v-model="formData.repairDesc"-->
<!--                   label="故障描述"-->
<!--                   rows="3"-->
<!--                   autosize-->
<!--                   type="textarea"-->
<!--                   maxlength="40"-->
<!--                   placeholder="请输入故障描述"/>-->
        <van-field v-model="formData.appName" readonly label="姓名" />

        <van-field v-model="formData.appPhone" readonly label="手机号码"/>

        <van-field v-model="formData.fdzyXxjjfcxxName" readonly label="报修区域"/>

        <van-field v-model="formData.repairAddr" readonly label="详细地址" autosize type="textarea"/>

        <van-field v-model="formData.repairDesc" readonly label="故障描述" autosize type="textarea"/>

        <van-field v-model="formData.repairTypeLabel" readonly label="报修类型"/>

        <div v-for="v in fileUrlObjs" :key="v.title" class="fileBox">
          <div v-if="v.value && v.value.length">
            <p class="van-cell-p">{{v.title}}</p>
            <div class="file-list">
              <uploadCom :readOnly="true" :defaultFiles="v.value"></uploadCom>
            </div>
          </div>
          <van-cell v-else :title="v.title" value="暂无" />
        </div>
      </van-form>
    </basic-layout>
    <full-loading v-if="loading"></full-loading>
  </div>
</template>
<script>
import {getRepairInfo} from "@api/srvAssurance/convApp";
import { queryFileList } from '@/api/common';

export default {
  name: 'repairDetail',
  props: {},
  components: {},
  data() {
    return {
      formData: {},
      fileUrlObjs: [],
      loading: false,
    }
  },
  created() {
  },
  computed: {},
  beforeMount() {
    this.reset();
    let repairInfoId = this.$route.query.param;
    if (repairInfoId) {
      this.initData(repairInfoId);
    }
  },
  mounted() {
  },
  methods: {

    reset() {
      this.formData = {};
      this.fileUrlObjs = [];
      this.loading = false;
    },

    async initData(repairInfoId) {
      await getRepairInfo(repairInfoId).then(res => {
        if (res.code === 1000 && res.data) {
          this.formData = {...res.data};
          if (this.formData.appPhone) {
            this.formData.appPhone = this.$infoHiding.handlePhone(this.formData.appPhone);
          }
          if (this.formData.repairAddr) {
            this.formData.repairAddr = this.$infoHiding.handleAddr(this.formData.repairAddr);
          }
          if (this.formData.fileCodeArr && this.formData.fileCodeArr.length > 0) {
            this.queryFileInfoData(this.formData.fileCodeArr);
          }
        }
      })
    },


    // 获取图片信息
    queryFileInfoData (filecodeArr) {
      this.loading = true;
      queryFileList(filecodeArr).then(res => {
        if (res.code === 1000 && res.data) {
          this.fileUrlObjs.push({
            title: "故障图片",
            value: [...res.data],
          });
          this.loading = false;
        }
      }).catch(() => {
        this.loading = false;
      })
    },

  },
}
</script>
<style lang="less" scoped>


.imgBox {
  padding: 16px;
  position: relative;

  //&:before {
  //  position: absolute;
  //  left: 0.21333rem;
  //  color: #ee0a24;
  //  font-size: 0.37333rem;
  //  content: '*';
  //}

  &:after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0.42667rem;
    bottom: 0;
    left: 0.42667rem;
    border-bottom: 0.02667rem solid #ebedf0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
  }

  .picStyle {
    padding: 16px 0px 16px 0px !important;
  }

}

.fileBox {
  .van-cell-p {
    padding: 10px 16px;
    box-sizing: border-box;
  }
  .file-list {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
}

</style>
